<template>
	<view class="index">
		<!-- <test2></test2> -->
		
		<view style="position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 9;" v-if="ditushow">
			<ditu @dianren="dianren" ref="ditu" @getzubie="getzubie" @jinlaiyouzubie="jinlaiyouzubie"></ditu>
		</view>
		
<!-- 		xianshishui
		// app_open: 1
		// current_list_open: 1
		// current_point_open: 1
		// desc: "所有返回值1为显示，0为隐藏。app_open 是否显示视频，current_point_open 是否显示轨迹，current_list_open 是否显示榜单，phototext_streaming_open 是否显示相册，exceptional_list_open 是否显示打赏。"
		// exceptional_list_open: 1
		// phototext_streaming_open: 1 -->

		<view class="top flexbc">
			<view class="flexc nav" style="position: relative;" >
				<view class="navli navliact">轨迹<view class="di"></view></view>
				<!-- <view class="navli" @click="qudapaihang2">图文直播</view> -->
				<!-- <view class="navli" @click="shipinshow = true">视频</view> -->
				<view class="navli" v-if="xianshishui.app_open" @click="quzhibo('/pages/test2/index')">直播</view>
				
				<view class="navli" v-if="xianshishui.current_list_open" @click="qudapaihang">排行榜</view>
				<view class="navli" v-if="xianshishui.exceptional_list_open" @click="zhaoren('/pages/dashangbang/index')">打赏榜</view>
				<view class="navli" v-if="xianshishui.phototext_streaming_open" @click="qudapaihang2">动态</view>
				<!-- <view style="position: absolute;right: 38rpx; top:27rpx" @click="zhaoren('/pages/chazhaoxuanshou/index')"><image src="https://cdn.rockysports.cn/h5zhibo/hh10.png" style="width: 32rpx;height: 33rpx;"></image></view> -->
			</view>
			<!-- <view class="flexci sr">
				<u-input placeholder="查找选手" @focus="zhaoren('/pages/chazhaoxuanshou/index')"
					placeholderStyle="color:#fff">
					<template slot="suffix">
						<image src="../../static/assets/img/sousuo.png" style="width: 33rpx; height: 33rpx;">
					</template>
				</u-input>
			</view>
			<view class="flexci dashang">
				<view class="image" v-if="songbang[0]">
					<view class="maozi">
						<image src="../../static/assets/img/t1.png">
					</view>
					<view class="tx">
						<image :src="songbang[0].head_img" style="border: 2px #FFEFAA solid;">
					</view>
				</view>
				<view class="image" v-if="songbang[1]">
					<view class="maozi">
						<image src="../../static/assets/img/t2.png">
					</view>
					<view class="tx">
						<image :src="songbang[1].head_img" style="border: 2px #C2C2C2 solid;">
					</view>
				</view>
				<view class="image" v-if="songbang[2]">
					<view class="maozi">
						<image src="../../static/assets/img/t3.png">
					</view>
					<view class="tx">
						<image :src="songbang[2].head_img" style="border: 2px #E58E4B solid;">
					</view>
				</view>
				<view @click="go('/pages/dashangbang/index')">打赏榜 ></view>
			</view> -->

		</view>
		<view class="top2" style="z-index: 999;" v-if="zubielist != ''">{{choosezubie.package_name}} <span style="color: #FF5811; margin-left:20rpx;" @click="zubieshow = true">切换组别></span></view>
		<view style="position: absolute; right: 20rpx; top:160rpx; z-index: 998; display: flex; background: rgba(255, 255, 255, 0.4); padding:10rpx 30rpx;">
			比赛用时：{{times}}
			<image src="https://cdn.rockysports.cn/h5zhibo/hh10.png" style="width: 32rpx;height: 33rpx; margin-left: 50rpx;"  @click="zhaoren('/pages/chazhaoxuanshou/index')"></image>
		</view>
		<view class="top3">
			<view class="flexci">
				<view style="margin-right: 20rpx;">只显示关注</view>
				<view><image src="https://cdn.rockysports.cn/h5zhibo/zhikanguanzhu.png" style="width: 27rpx;height: 27rpx;" v-if="!zhikanguanzhu" @click="zhiguanzhuma()"></image></view>
				<view><image src="https://cdn.rockysports.cn/h5zhibo/zhikanguanzhu2.png" style="width: 27rpx;height: 27rpx;" v-if="zhikanguanzhu" @click="zhiguanzhuma()"></image></view>
			</view>
		</view>
		<view class="paihang" style="width: 120rpx;">
			<swiper class="swiper" circular style="width: 100%; height: 650rpx;" :autoplay="true" :interval="10000" :indicator-dots="true"
				:duration="100">
				<swiper-item>
					<view class="phper">
						<view style="background: rgba(0, 0, 0, 0.4);margin-bottom: 40rpx;text-align: center;padding: 10rpx 0;color: #FFFFFF;border-radius: 10rpx;">打赏榜单</view>
						 <!-- @click="zhaoren('/pages/dashangbang/index','dashang')" -->
						<view class="bj">
							<view class="phperli" v-for="(item,index) in songbang" :key="item.id">
								<view class="maozi" v-if="index == 0">
									<image src="../../static/assets/img/t4.png">
								</view>
								<view class="tx flexc">
									<image :src="item.head_img" :style="index==0?'border: 2px #FFC700 solid;':''">
								</view>	
								<view class="mingzi slh flexc">{{item.nickname}}</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="phper">
						<view style="background: rgba(0, 0, 0, 0.4);margin-bottom: 40rpx;text-align: center;padding: 10rpx 0;color: #FFFFFF;border-radius: 10rpx;">被打赏榜</view>
						<view class="bj">
							<view class="phperli" v-for="(item,index) in shoubang" :key="item.id">
								<view class="maozi" v-if="index == 0">
									<image src="../../static/assets/img/t4.png">
								</view>
								<view class="tx flexc">
									<image :src="item.head_img" :style="index==0?'border: 2px #FFC700 solid;':''">
								</view>
								<view class="mingzi slh flexc">{{item.name}}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- <view class="flex" style="margin-bottom: 30rpx; border-radius: 10rpx; overflow: hidden;">
				<view :class="phact == 1?'phli phliact':'phli'" @click="phact = 1">成绩榜</view>
				<view :class="phact == 2?'phli phliact':'phli'" @click="phact = 2">礼物榜</view>
			</view>
			<view class="phper" v-if="phact == 1">
				<view class="bj" @click="qudapaihang">
					<view class="phperli" v-for="(item,index) in paobubang" :key="item.id">
						<view class="maozi" v-if="index == 0">
							<image src="../../static/assets/img/t4.png">
						</view>
						<view class="tx flexc">
							<image :src="item.head_img" :style="index==0?'border: 2px #FFC700 solid;':''">
						</view>
						<view class="mingzi slh flexc">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="phper" v-if="phact == 2">
				<view class="bj" @click="zhaoren('/pages/nengliangbang/index')">
					<view class="phperli" v-for="(item,index) in shoubang" :key="item.id">
						<view class="maozi" v-if="index == 0">
							<image src="../../static/assets/img/t4.png">
						</view>
						<view class="tx flexc">
							<image :src="item.head_img" :style="index==0?'border: 2px #FFC700 solid;':''">
						</view>
						<view class="mingzi slh flexc">{{item.name}}</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="content">
			<!-- <view class="xc slh">22:22马龙到达马龙到达马龙到达马龙到达马龙到达马龙到达</view> -->
			<view class="lw " v-show="showliwu">
				<scroll-view style="max-height: 480rpx;" scroll-y="true" :scroll-top="childrenId2"
					:scroll-with-animation="true" :show-scrollbar="true">

					<view class="flexci lwli" v-for="(item,index) in liwulist" :key="index">
						<view class="tx">
							<image :src="item.gift.head_img">
						</view>
						<view class="dx flexci">
							<view>
								<view class="slh" style="width: 130rpx;">{{item.gift.nickname}}</view>
								<view class="slh" style="width: 130rpx;">给{{item.gift.player_name}}</view>
								<view>送{{item.gift.gift_name}}</view>
							</view>

						</view>
						<view class="flexci wp">
							<view>
								<image :src="item.gift.gift_img">
							</view>
							<view class="sl"><span style="margin: 0 20rpx;">x</span>{{item.num}}</view>
						</view>
					</view>
				</scroll-view>

			</view>
			<view class="js" v-if="saishishow">
				{{saishi.profile}}
			</view>
			<view class="ly" ref="ly" id="ly">
				<scroll-view style="max-height: 220rpx;" scroll-y="true" :scroll-top="childrenId"
					:scroll-with-animation="true" :show-scrollbar="true">
					<view class="lyli" v-for="(item,index) in liaotianlist" :key="index">
						<span class="name">{{item.name}}：</span>{{item.content}}
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- <view class="youdibu" @click="jieshaologtrue">
			<view class="flexc"><image src="https://cdn.rockysports.cn/h5zhibo/erweima2.jpg" style="width: 82rpx;height: 82rpx;"></image></view>
			<view style="background: rgba(0, 0, 0, 0.4);margin-top: 10rpx; padding: 10rpx 20rpx;border-radius: 30rpx; font-size: 12rpx;">视频直播</view>
			
		</view> -->
		<view class="dibu">
			<view class="flexbc">
				<view class="sr flexci">
					<u-input placeholder="说点什么…" v-model="liuyan" placeholderStyle="color:#fff">
						<template slot="suffix">
							<!-- <view @tap="fabuliuyan" style="background: #FFFFFF; padding: 10rpx 20rpx; border-radius: 5rpx;">发送</view> -->
							<image @tap="fabuliuyan" @confirm="fabuliuyan" src="../../static/assets/img/fa.png"
								style="width: 50rpx; height: 50rpx; position: relative; right: -10rpx;">
						</template>
					</u-input>
				</view>
				<view class="flexb">
					<!-- <view>
						<image src="../../static/assets/img/p2.png"
							style="width: 72rpx; height: 72rpx; margin-left: 25rpx;">
					</view> -->
					<view style="margin-left: 0.25rem;" @click="go('/pages/qian/index')">
						<image src="https://cdn.rockysports.cn/h5zhibo/hh11.png"
							style="width: 72rpx; height: 72rpx; margin-left: 25rpx;">
					</view>
					<view style="margin-left: 0.25rem;" @click="kai">
						<image src="../../static/assets/img/p4.png"
							style="width: 72rpx; height: 72rpx; margin-left: 25rpx;">
					</view>
				</view>
			</view>
			
		</view>
		<view class="flexcc" style="background: rgba(0, 0, 0, 0.5); height: 100rpx; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 99;">
			<view style="color: #FFFFFF; margin-right: 20rpx;">赏金提现、报名优惠、更多赛事</view>
			<view style="background: #E62B49; padding: 10rpx 20rpx; border-radius: 30rpx; color: #FFFFFF;" @click="dakai">打开Running派</view>
		</view>
		<u-popup :show="show" mode="bottom" :round="10" @close="close">
			<view style="padding: 30rpx;">
				<view class="flexb">
					<view class="flex">
						<view style="margin-right: 25rpx;">
							<image :src="person2.player.head_img" style="width: 100rpx; height: 100rpx;"></image>
						</view>
						<view class="flexci">
							<view>
								<view>{{person2.player.name}}</view>
								<view style="color: #E4590C;">{{person2.player.no}}</view>
							</view>
						</view>

					</view>

					<!-- <view class="flexci">
						<view class="ygz gz">已关注</view>
						<view class="gz">关注</view>
					</view> -->
				</view>
				<view style="color: #999; padding: 20rpx 0; line-height: 40rpx;">
					个人简介：<span v-html='person2.brief.details'></span>
				</view>
				<view>
					<view style="padding: 20rpx 0; font-size: 26rpx;">CP点打卡时间</view>
					<view style="padding: 10rpx 30rpx;">
						<view class="flexb" style="color: #E4590C; font-weight: bold;"
							v-for="(item,index) in person2.results" :key="item.id">
							<view style="flex: 1;">{{item.cp_name}}</view>
							<view style="flex: 1; text-align: right;">{{item.time_used}}</view>
							<view style="flex: 1; text-align: right;">{{item.speed_allocation}}</view>
						</view>
					</view>

				</view>
			</view>

		</u-popup>

		<u-popup :show="show2" mode="bottom" :round="10" @close="close">
			<u-button text="授权获取用户信息" @tap="getinfo()"></u-button>
		</u-popup>
		
		
		

		<u-popup :show="liwu_show" mode="bottom" :round="10" @close="close" class="liwuc">
			<view style="margin-bottom: 20rpx; padding: 20rpx 10rpx;" class="flexcc" v-if="liwudangci">

				<view class="flexci">
					<image :src="liwudangci.gift.gift_img" style="width: 200rpx; height: 200rpx;">
						<view
							style="margin: 0 20rpx; font-size: 60rpx; font-weight: bold; color: #FFFFFF; font-family: 'shuzi'; ">
							x{{liwudangci.num}}</view>
				</view>

				<!-- <span>您给</span>
				<span style="margin-left: 10rpx;">{{liwudangci.gift.player_name}}</span>
				<span style="margin-left: 10rpx;">送出了</span>
				<span style="margin-left: 10rpx;">{{liwudangci.gift.gift_name}}</span>
				<span style="margin-left: 10rpx;">x1</span> -->

			</view>
			<liwu v-show="liwu_show" @chongzhi="chongzhi" @wosongliwu="wosongliwu" ref="liwu" @guan="guan" :liwuid="liwuid" :sign_id="sign_id"></liwu>
		</u-popup>

		<u-toast ref="uToast"></u-toast>

		<u-popup :show="chongzhilog" mode="bottom" :round="10" @close="close2" class="liwuc3">
			<view class="liwuc2">
				<view style="font-size: 33rpx; font-weight: bold; text-align: center; padding: 30rpx;">充值</view>
				<view>余额：{{yue.balance}}派币</view>
				<view class="flexb" style="flex-wrap: wrap;">
					<view :class="chongzhiid == item.id?'czli czliact flexcc':'czli flexcc'"
						@click="chongzhiid = item.id" v-for="item in qianlist" :key="item">
						<view style="text-align: center;">
							<view style="font-size: 34rpx; margin-bottom: 10rpx;">{{item.name}}</view>
							<view style="color: #686868;">{{item.price}}元</view>
						</view>

					</view>
				</view>

				<view v-if="!ing" @click="chongzhigo()"
					style="background: #E62B49; text-align: center; color:#FFFFFF; padding: 25rpx; border-radius: 60rpx; font-size: 29rpx; margin-top: 30rpx;">
					立即充值
				</view>
				<view v-if="ing"
					style="background: #E62B49; text-align: center; color:#FFFFFF; padding: 25rpx; border-radius: 60rpx; font-size: 29rpx; margin-top: 30rpx;">
					充值中...
				</view>
			</view>
		</u-popup>

		<u-popup :show="daliwushow" mode="center" class="daliwu">
			<u-transition :show="daliwushow" mode="zoom-in">
				<view style="color: #FFFFFF; font-size: 60rpx; text-align: center; width: 500rpx; margin: 0 auto;">
					{{daliwu.gift.nickname}}为{{daliwu.gift.player_name}}送出了
				</view>
				<view>
					<image src="../../static/assets/img/hudie.png" style="width: 750rpx; height: 500rpx;"> </image>
				</view>
			</u-transition>
		</u-popup>

		<u-picker :show="zubieshow" :columns="zubielist2" keyName="package_name" @confirm="zubiechange"
			@cancel="zubieshow=false"></u-picker>
			
		<u-popup :show="jieshaolog2" mode="center" :round="10" @close="closej2">
			<view style="width: 400rpx; padding: 50rpx 0;">
				<view class="flexci" style="width: 100%; margin-bottom: 20rpx;">
					<view style=" padding-left: 103rpx;padding-right: 10rpx;"><image src="https://cdn.rockysports.cn/h5zhibo/hh1.png" style="width: 72rpx; height: 72rpx;"></image></view>
					<view style="font-size: 30rpx; color: #333;">CP点</view>
				</view>
				<view class="flexci" style="width: 100%; margin-bottom: 20rpx;">
					<view style=" padding-left: 103rpx;padding-right: 10rpx;"><image src="https://cdn.rockysports.cn/h5zhibo/hh5.png" style="width: 72rpx; height: 72rpx;"></image></view>
					<view style="font-size: 30rpx; color: #333;">参赛选手</view>
				</view>
				<view class="flexci" style="width: 100%; margin-bottom: 20rpx;">
					<view style=" padding-left: 103rpx;padding-right: 10rpx;"><image src="https://cdn.rockysports.cn/h5zhibo/hh2.png" style="width: 72rpx; height: 72rpx;"></image></view>
					<view style="font-size: 30rpx; color: #333;">公里数</view>
				</view>
				<view class="flexci" style="width: 100%; margin-bottom: 20rpx;">
					<view style=" padding-left: 103rpx;padding-right: 10rpx;"><image src="https://cdn.rockysports.cn/h5zhibo/hh3.png" style="width: 72rpx; height: 72rpx;"></image></view>
					<view style="font-size: 30rpx; color: #333;">补给站</view>
				</view>
				<view class="flexci" style="width: 100%; margin-bottom: 20rpx;">
					<view style=" padding-left: 103rpx;padding-right: 10rpx;"><image src="https://cdn.rockysports.cn/h5zhibo/hh6.png" style="width: 72rpx; height: 72rpx;"></image></view>
					<view style="font-size: 30rpx; color: #333;">计时点</view>
				</view>
				<view style="background-color: #f1f1f1;color: #004AE9; font-size: 30rpx; padding:15rpx 0rpx; width: 200rpx;text-align: center;font-weight: bold;margin: 20rpx auto;"  @click="closej2">我知道了</view>
			</view>
		</u-popup>
		
		<u-popup :show="jieshaolog" mode="center" :round="10" @close="closej">
			<view>
				<image src="https://cdn.rockysports.cn/h5zhibo/erweima2.jpg" style="width: 600rpx;height: 600rpx;"></image>
			</view>
			<!-- <view @click="dakai" style="padding: 20rpx; text-align: center;">打开APP</view> -->
			<!-- <wx-open-launch-app id="launch-btn" appid="wx836292e2aae9662b" extinfo="1" style="width: 100%; height:100rpx;">
					<script type="text/wxtag-template">
						<style>.btn { color: white; width: 100%; height:100rpx; background-color: #FF286F;  border: none; font-size: 20rpx;}</style>
						<button class="btn">进入Running派观看</button>
					</script>
			</wx-open-launch-app> -->
		</u-popup>
		
		<u-popup :show="shipinshow" mode="center" :round="5" @close="closeshipin">
			<view style=" font-size: 16px; padding: 40rpx; position: relative;">
				<view style="position: absolute; right: 30rpx; top: 30rpx;" @click="closeshipin()"><u-icon size="18" name="close-circle-fill"></u-icon></view>
				<view>观看视频直播</view>
				<view style="margin-top: 30rpx;">方式一：扫描下方，紫音传媒 视频号二维码</view>
				<view style="display: flex; justify-content: center; margin-top: 30rpx;"><image src="../../static/ziyin.jpg" style="width: 300rpx; height: 452rpx;"></image></view>
				
				
				<view>方式二：扫描下方二维码，下载running派app</view>
				<view style="display: flex; justify-content: center; margin-top: 30rpx;"><image src="../../static/logo2.jpg" style="width: 300rpx; height: 325rpx;"></image></view>
				
				<view @click="gox" style="color: crimson; margin-top: 30px; width: 100%; text-align: center; font-weight: bold;">点此处下载APP</view>
				<!-- <view>关注“紫音传媒”视频号，或识别二维码下载“running派”App观看视频直播。</view> -->
				
				
			</view>
		</u-popup>
		
	</view>
</template>


<script>
	
	import test2 from '../test2/index'
	import liwu from './compontents/liwu'
	import ditu from '../ditu/index'
	import moment from 'moment'
	export default {
		components: {
			liwu,
			ditu,
			test2
		},
		name: 'index',
		data() {
			return {
				zhikanguanzhu:false,
				jieshaolog:false,
				jieshaolog2:true,
				daliwu: {
					gift: ""
				},
				daliwushow: false,
				value: "",
				liwu_show: false,
				show: false,
				show2: false,
				liuyan: "",
				socket: "",
				person2: {
					player: "",
					brief: "",
					results: ""
				},
				person: "",

				receiver_id: 3,
				liaotianlist: [],
				childrenId: 0,

				liwulist: [],
				liwudangci: "",
				liwudangcidaojishi: "",
				childrenId2: 0,

				daojishi: "",
				showliwu: false,

				chongzhilog: false,
				qianlist: [],

				ditushow: false,

				saishi: "",

				saishishow: true,

				phact: 1,

				paobubang: "",

				songbang: "",
				shoubang: "",
				chongzhiid: "",

				yue: 0,
				ing: false,

				zubielist: [],
				zubielist2: [],
				zubieshow: false,
				choosezubie: "",
				times:"",
				shipinshow:false,
				
				liwuid:"",
				sign_id:"",
				
				xiazaima:"",
				xiazaimashijian:0,
				
				xianshishui:""
			}
		},
		onShow(option) {
			// document.title = '龙之九子·狻猊·南隍城岛站轨迹直播'
			// this.getpaobangdan()
		},
		mounted() {

		},
		onReady() {

		},
		onHide() {

		},
		onLoad(option) {
			
			if (this.$route.query.activity_id) {
				uni.setStorageSync('activity_id', this.$route.query.activity_id)
			}
			if (uni.getStorageSync('checkren')) {
				uni.setStorageSync('checkren', "")
			}
			if (this.$route.query.pack_id) {
				uni.setStorageSync('pack_id', this.$route.query.pack_id)
			}
			if (this.$route.query.code) {
				uni.setStorageSync('token', this.$route.query.code)
			}
			if (this.$route.query.api_token) {
				uni.setStorageSync('api_token', this.$route.query.api_token)
			}
			
			if (this.$route.query.live_id) {
				uni.setStorageSync('live_id', this.$route.query.live_id)
				this.receiver_id = this.$route.query.live_id
			}
			
			if(this.$route.query.sign_id){
				uni.setStorageSync('sign_id',this.$route.query.sign_id)
			}else{
				uni.removeStorageSync('sign_id');
			}
			
			
			
			setInterval(() => {
				this.saishishow = false
			}, 10000)
			
			
				
				
			// setInterval(() => {
			// 	this.getpaobangdan()
			// }, 5000)


			let that = this
			let login = this.auth_me()
			login.then((res) => {
				//已经登陆了  获取个人信息连接socket
				this.person = res.data.data
				uni.setStorageSync('person', JSON.stringify(res.data.data))
				this.$nextTick(item => {
					this.lianjie()
					// this.jiaruliaotianshi()
					this.getyue()

					this.ditushow = true
					
					//有守礼物的ID
					// if (this.$route.query.player_id) {
					// 	this.liwu_show = true
					// 	this.liwuid = this.$route.query.player_id
					// }
					
					//导航
					uni.$u.http.post(this.urlass + '/api/sport/api/app/living_status', {
						id: uni.getStorageSync('activity_id'),
						api_token:uni.getStorageSync('token')
					}).then(res => {
						this.xianshishui = res.data.data
						
					})	
				})
			})
			login.catch((err) => {
				//location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx154dd8349a505277&redirect_uri=https%3A%2F%2Fsport.luojiweiye.com%2Fweb%2Fzhibodengluzhuanyong&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
				// //未登录 登录
				// // 	//用户名密码登录
				// let p = new Promise((ress, rej) => {
				// 	uni.$u.http.post(this.urlass + '/api/v1/auth/login', {
				// 				mobile: "17616212620",
				// 				password: '123123'
				// 			}).then(res2 => {
				// 				if (res2.data.code == 200) {
				// 					uni.setStorageSync('token', res2.data.data.access_token)
				// 					that.person = res2.data.data
				// 					uni.setStorageSync('person', JSON.stringify(res2.data.data))
				// 					ress(res2)
				// 				} else {
				// 					that.$refs.uToast.show({
				// 						message: "登录失败了",
				// 						type: "error"
				// 					})
				// 				}
				// 	})
				// })
				// p.then(res => {
				// 	//连接socket
				// 	this.lianjie()
				// 	this.jiaruliaotianshi()
				// 	this.ditushow = true
				// })
			})
			
			

		},

		beforeDestroy() {
			if (this.socket != '') {
				this.socket.close();
			}
		},
		methods: {
			jieshaologtrue:function(){
				this.jieshaolog = true
				// this.$nextTick(()=>{
				// 	var btn = document.getElementById('launch-btn');
				// 	console.log(btn)
				// 	 btn.addEventListener('launch', function (e) {
				// 	   console.log('success');
				// 	 });
				// 	 btn.addEventListener('error', function (e) {
				// 	   console.log('fail', e.detail);
				// 	 });
				// })
			},
			dakai:function(){
				
				// var openApp = function (src) {
				// 	// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
				// 	// 否则打开a标签的href链接
				// 	const ifr = document.createElement('iframe');
				// 	ifr.src = src;
				// 	ifr.style.display = 'none';
				// 	document.body.appendChild(ifr);
				// 	var poenTime = +new Date()
				// 	window.setTimeout(() => {
				// 	  document.body.removeChild(ifr);
				// 	  if ((+new Date()-openTime>2500)){
				// 		window.location = 'APP Store下载的地址 '
				// 	  }
				// 	}, 600);
				// };
					  
				var ua = window.navigator.userAgent.toLowerCase();
				    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				        this.$refs.uToast.show({
				        	message: '请点击右上角‘...’图标，用手机默认浏览器打开'
				        })
				    } else {
						if (navigator.userAgent.match(/android/i)){
							try {
								 //schema链接或者universal link
								
								var openTime = +new Date();
								window.location = "runpi://";
								var timer = setTimeout(function () {
								    if ((new Date()) - openTime < 2200) {//加了200ms基准误差
								        window.location.href = 'https://weibu.vip/downloads';
								    }
								    if ((new Date()) - openTime > 2200) {
								        clearTimeout(timer);
								    }
								}, 2000);

								// let now = moment()
								// this.xiazaima = setInterval(() => {
								// 	if ((moment().diff(now)) > 2000){			
								// 		window.location.href = ' https://weibu.vip/downloads'
								// 	}
								// }, 501)
							} catch (e) {}
						}
						if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
							window.location = "https://apps.apple.com/us/app/running-%CF%80/id1529051869";
							var timer = setTimeout(function () {
							    if ((new Date()) - openTime < 2200) {//加了200ms基准误差
							        window.location.href = 'https://weibu.vip/downloads';
							    }
							    if ((new Date()) - openTime > 2200) {
							        clearTimeout(timer);
							    }
							}, 2000);
						}
						
				  //       window.location.href = "runpi://"
						// window.close();
				    }
			},
			gox:function(){
				window.location.href = "https://sport.luojiweiye.com/web/weibu/#/pagesA/pages/download/client-download/client-download"
			},
			yongshi:function(){
				if(this.choosezubie){
					let now = moment()
					let time = moment(this.choosezubie.qiang_at)
					let miao = now.diff(time, 'seconds')
					
					if(miao>0){
						let result = parseInt(miao)
						let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(
						  result / 3600);
						let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) :
						  Math.floor((result / 60 % 60));
						let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((
						  result % 60));
						
						let res = '';
						if (h !== '00') res += `${h}小时`;
						if (m !== '00') res += `${m}分`;
						res += `${s}秒`;
						
						this.times = res
					}else{
						this.times = '未开赛'
					}
				}
				
			},
			zhiguanzhuma:function(){
				this.zhikanguanzhu = !this.zhikanguanzhu
				this.$refs.ditu.zhiguanzhuma()
			},
			closej:function(){
				this.jieshaolog = false
			},
			closej2:function(){
				this.jieshaolog2 = false
			},
			closeshipin:function(){
				this.shipinshow = false
			},
			xiugaititle: function() {
				console.log(this.saishi.group_name)
				var that = this
				
				uni.setNavigationBarTitle({
					title: this.saishi.group_name
				});
				// setTimeout(function() {
				// 	document.title = that.saishi.group_name;
					
				// 	var iframe = document.createElement('iframe');
				// 	iframe.style.visibility = 'hidden';
				// 	iframe.style.width = '1px';
				// 	iframe.style.height = '1px';
				// 	iframe.onload = function() {
				// 		setTimeout(function() {
				// 			document.body.removeChild(iframe);
				// 		}, 0);
				// 	};
				// 	document.body.appendChild(iframe);
				// }, 0);
			},
			
			fenxiang:function(){
				var that = this
				var jweixin = require('jweixin-module')
				
				let url = window.location.href.split("#")[0]
				let url2 = window.location.origin +
					`/live?&activity_id=${uni.getStorageSync('activity_id')}&pack_id=${uni.getStorageSync('pack_id')}`
				
				uni.$u.http.post(this.urlass + '/api/sport/api/sport', {
					url: url
				}).then(res => {
					
					jweixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.data.signature, // 必填，签名
						jsApiList: ["updateAppMessageShareData", "updateTimelineShareData","hideMenuItems"], // 必填，需要使用的JS接口列表
						openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app']
					});
					
					
					
					jweixin.ready(function() {
						jweixin.hideMenuItems({
							menuList: ["menuItem:copyUrl"] // 屏蔽复制链接
						});
						jweixin.updateAppMessageShareData({
							title: that.saishi.group_name, // 分享标题  
							desc: that.saishi.group_name, // 分享描述  
							link: url2, // 分享链接  
							imgUrl: 'https://cdn.rockysports.cn/h5zhibo/weibujishi.png', // 分享图标                                
							success: res => {
								// console.log(1)
								
								 
							},
							cancel: function() {
								// 用户取消分享后执行的回调函数  
							}
						});
						//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）  
						jweixin.updateTimelineShareData({
							title: that.saishi.group_name, // 分享标题                                  
							link: url2, // 分享链接
							imgUrl: 'https://cdn.rockysports.cn/h5zhibo/weibujishi.png', // 分享图标                                  
							success: res => {
								//点击分享时提示用户分享图，
								// console.log(2)
							},
							cancel: function() {
								// 用户取消分享后执行的回调函数  
							}
						});
						
						
				
				
					});
				})
			},
			
			jinlaiyouzubie:function(e){
				
				this.choosezubie = e
				this.yongshi()
				// this.zubiechange(obj)
			},
			//切换组别  要把地图那边更新  储存现在的组别id等
			zubiechange: function(e) {
				this.choosezubie = e.value[0]
				uni.setStorageSync('pack_id', this.choosezubie.id)
				this.$refs.ditu.getluxian()
				this.$refs.ditu.sear.package_id = this.choosezubie.id
				this.yongshi()
				this.zubieshow = false
			},
			//获取组别踊跃切换
			getzubie: function(zubie) {
				clearInterval(this.tiemsst)
				this.zubielist = zubie
				this.zubielist2 = [zubie]
				if (this.choosezubie == '') {
					this.choosezubie = this.zubielist[0]
				}
				this.tiemsst = setInterval(()=>{
					this.yongshi()
				},1000)
				
			},
			getyue: function() {
				uni.$u.http.get(this.urlass + '/api/v1/users/account', {
					params: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					this.yue = res.data.data
				})
			},
			qudapaihang: function() {
				location.href = 'https://sport.luojiweiye.com/web/h5/gerenchengji.html?id='+uni.getStorageSync('activity_id')+'&xianshima=1'
			},
			qudapaihang2: function() {
				location.href = 'https://sport.luojiweiye.com/web/weibu/#/pagesA/pages/forum/forum?game_id=' + uni.getStorageSync('activity_id') + '&platform=h5'
			},
			qudapaihang3: function() {
				uni.navigateTo({
					url: '/pages/shipin/index'
				});
			},
			quzhibo: function(url) {
				uni.navigateTo({
					url: url
				});
			},
			zhaoren: function(url,val) {
				if(val == 'dashang'){
					
				}
				uni.navigateTo({
					url: url + '?val=' + val,
					events: {
						songliwu: (res) => {
							this.liwu_show = true
						},
						dingweidao:(res)=>{
							// console.log(res)
						},
						gaititle:(res)=>{
							
						}
					}
				});
			},
			getpaobangdan: function() {
				uni.$u.http.get(this.urlass + '/api/sport/api/sport/admin/results', {
					params: {
						activity_id: uni.getStorageSync('activity_id'),
						token: uni.getStorageSync('token'),
						page: 1,
						page_size: 4,
						is_need_head: 1,
						package_id: uni.getStorageSync('pack_id')
					}
				}).then(res => {
					this.paobubang = res.data.data.data
				})
			},
			jiaruliaotianshi: function() {
				uni.$u.http.post(this.urlass + '/api/v1/group/invite', {
					group_id: 3,
					token: uni.getStorageSync('token')
				}).then(res => {
					this.qianlist = res.data.data
				})
			},
			getqianlist: function() {
				uni.$u.http.get(this.urlass + '/api/v1/users/charge-product', {
					params: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					this.qianlist = res.data.data
				})
			},
			chongzhigo: function(id) {
				if (!this.chongzhiid) {
					this.$refs.uToast.show({
						message: '请选择充值金额'
					})
					return false
				}
				this.ing = true
				var that = this
				uni.$u.http.post(this.urlass + '/api/v1/users/charge', {
					product_id: this.chongzhiid,
					payment_method: "wx_mp",
					token: uni.getStorageSync('token')
				}).then(res2 => {
					if (res2.data.code == 200) {
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								"appId": res2.data.data.payInfo.appId,
								'timeStamp': res2.data.data.payInfo.timeStamp,
								'nonceStr': res2.data.data.payInfo.nonceStr,
								'package': res2.data.data.payInfo.package,
								'signType': res2.data.data.payInfo.signType,
								'paySign': res2.data.data.payInfo.paySign,
							},
							function(res) {
								if (res.err_msg == "get_brand_wcpay_request:ok") {
									that.$refs.uToast.show({
										message: '充值成功'
									})
									that.chongzhilog = false
									that.ing = false
								} else {
									that.ing = false
								}
							});
					} else {
						this.$refs.uToast.show({
							message: res2.data.message,
							type: "error"
						})
						this.ing = false
					}
				})
			},
			chongzhi: function() {
				this.getyue()
				this.getqianlist()
				this.liwu_show = false
				this.chongzhilog = true
			},
			lianjie: function() {
				let that = this
				// console.log(uni.getStorageSync('token'))
				let liveid = 3
				if(uni.getStorageSync('live_id')){
					liveid = uni.getStorageSync('live_id')
				}
				this.socket = uni.connectSocket({
					url: 'wss://live.weibu.vip/wss/default.io?token=' + uni.getStorageSync('token') + '&live_id=' + liveid, 
					complete: (res) => {
						// console.log(res)
					}
				});
				this.socket.onOpen(function(res) {
					console.log('WebSocket连接已打开！');
				});
				this.socket.onError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
				});
				this.socket.onMessage(function(res) {
					let obj = JSON.parse(res.data).content

					if (obj.profile) {
						// avatar: ""
						// created_at: "2022-05-18 15:26:47"
						// creator_id: 1
						// dismissed_at: null
						// group_name: "中国四神兽超级越野赛测线赛"
						// id: 3
						// is_dismiss: 0
						// is_mute: 0
						// is_overt: 0
						// max_num: 2000
						// profile: "欢迎进入龙之九子·狻猊·南隍城岛站轨迹直播直播间，你可以在这里查看实时位置、榜单、照片 直播并为自己喜欢的大神助力打call， 幸运观众将会获得神秘礼物哦"
						// updated_at: "2022-05-18 15:26:47"
						that.saishi = obj
						
						uni.setStorageSync('group_name', that.saishi.group_name)
						that.fenxiang()
						that.xiugaititle()
						
						if(that.$route.query.sign_id){
							uni.setStorageSync('sign_id',that.$route.query.sign_id)
							that.sign_id = that.$route.query.sign_id
							that.liwu_show = true
						}
						// document.title = obj.group_name
						// console.log(document.title)
					}
					if (obj.talk_type == 2) {
						if (obj.data.msg_type == 1) {
							//聊天处理
							that.shoudaoliaotian(obj.data)
						}
						if (obj.data.msg_type == 11) {
							//礼物处理
							that.shoudaoliwu(obj.data)
							// that.songbang = obj.data.songbang
							// that.shoubang = obj.data.shoubang
						}
						if(obj.data.msg_type == 12){
							that.songbang = obj.data.songbang
							that.shoubang = obj.data.shoubang
						}
					}
				});
				this.socket.onClose(function(res) {
					let login = that.auth_me()
					login.then((res) => {
						//已经登陆了  获取个人信息连接socket
						this.person = res.data.data
						uni.setStorageSync('person', JSON.stringify(res.data.data))
						this.$nextTick(item => {
							that.lianjie()
						})
					})
				});

				setInterval(() => {
					this.socket.send({
						data: `{"event":"heartbeat","content":"ping"}`
					});
				}, 10000)
			},
			wosongliwu:function(res){
				this.shoudaoliwu(res,'wo')
			},
			shoudaoliwu: function(obj,val) {
				console.log(obj)
				if (obj.gift.gift_name == '翅膀') {
					this.daliwu = obj
					this.daliwushow = true
					setTimeout(() => {
						this.daliwushow = false
					}, 2000)
				}
				let obj2 = Object.assign({}, obj);
				//送礼物自己看到
				if(val == 'wo'){
				// if (obj2.user_id == JSON.parse(uni.getStorageSync('person')).id) {
					clearInterval(this.liwudangcidaojishi)

					//送相同的
					if (this.liwudangci && obj2.gift.gift_name == this.liwudangci.gift.gift_name && obj2.gift
						.player_name == this.liwudangci.gift.player_name) {
						this.liwudangci.num++
					} else {
						this.liwudangci = obj2
						this.$set(this.liwudangci, 'num', 1)
					}
					this.liwudangcidaojishi = setInterval(() => {
						this.liwudangci = ''
					}, 3000)
				}
				let y = false
				this.liwulist.forEach(item => {
					if (item.gift.gift_name == obj.gift.gift_name && item.gift.nickname == obj.gift.nickname &&
						item.gift.player_name == obj.gift.player_name) {
						item.num++
						y = true
					}
				})
				if (!y) {
					this.$set(obj, 'num', 1)
					this.liwulist.push(obj)
					this.$nextTick(item => {
						this.childrenId2 = (this.liwulist.length + 1) * 150
					})
				}
				clearInterval(this.daojishi)
				this.showliwu = true
				this.daojishi = setInterval(() => {
					this.showliwu = false
					this.liwulist = []
				}, 10000)

			},
			shoudaoliaotian: function(obj) {


				this.liaotianlist.push(obj)
				this.$nextTick(item => {
					this.childrenId = (this.liaotianlist.length + 1) * 80
				})
			},
			auth_me: function() {
				return new Promise((r, j) => {
					uni.$u.http.get(this.urlass + '/api/v1/auth/me', {
						params: {
							token: uni.getStorageSync('token')
						}
					}).then(res => {
						//获取一下成绩
						uni.$u.http.get(this.urlass + '/api/v1/group/gift/user', {
							params: {
								activity_id: uni.getStorageSync('activity_id'),
								token: uni.getStorageSync('token'),
								page: 1,
								page_size: 3,
								package_id: uni.getStorageSync('pack_id')
							}
						}).then(res2 => {
							this.songbang = res2.data.data
						})

						uni.$u.http.get(this.urlass + '/api/v1/group/gift/player', {
							params: {
								activity_id: uni.getStorageSync('activity_id'),
								token: uni.getStorageSync('token'),
								page: 1,
								page_size: 4,
								package_id: uni.getStorageSync('pack_id')
							}
						}).then(res2 => {
							this.shoubang = res2.data.data
						})


						r(res)
					}).catch(err => {
						j(err)
					})
				})

			},
			fabuliuyan: function() {
				if (!this.liuyan) {
					return false
				}
				
				let data = {
					content:this.liuyan,
					count:"",
					created_at: "",
					gift: "",
					group_avatar: "",
					group_name: "柴古定位测试",
					id: "",
					msg_type: "",
					name: this.person.nickname,
					shoubang: "",
					songbang: "",
					talk_type: "",
					user_id: "",
				}
				this.shoudaoliaotian(data)
				
				uni.$u.http.post(this.urlass + '/api/v1/talk/message/text', {
					receiver_id: this.receiver_id,
					talk_type: 2,
					text: this.liuyan,
					token: uni.getStorageSync('token')
				}).then(res2 => {
					if (res2.data.code == 200) {
						this.liuyan = ""
					} else {
						this.$refs.uToast.show({
							message: res2.data.message,
							type: "error"
						})
					}
				})
			},
			getinfo: function() {
				let that = this
				tt.getUserProfile({
					withCredentials: true,
					success(res) {
						let obj = JSON.parse(res.rawData)
						uni.$u.http.post(this.urlass + '/api/v1/auth/save-user', {
							name: obj.nickName,
							head_img: obj.avatarUrl,
							token: uni.getStorageSync('token')
						}).then(res2 => {
							if (res2.data.code == 200) {
								that.show2 = false
							} else {
								this.$refs.uToast.show({
									message: res2.data.message,
									type: "error"
								})
							}
						})

					},
					fail(res) {
						// console.log(res)
					},
				});
			},
			dianren: function(player_id) {

				//获取某人信息
				uni.$u.http.get(this.urlass + '/api/sport/api/sport/admin/result', {
					params: {
						sign_id: player_id
					}
				}).then(res => {
					if (res.data.msg.code == 0) {
						this.person2 = res.data.data
						this.show = true
					} else {
						this.$refs.uToast.show({
							message: res.data.msg.info,
							type: "error"
						})
					}
				})
				// axios.get('/api/sport/admin/result?player_id=' + player_id)
				// 	.then((response) => {


				// 		if (index) {
				// 			this.zhongxin(this.ren[index].longitude, this.ren[index].latitude)
				// 		}



				// 		if (localStorage.getItem('guanzhu') != null) {
				// 			this.guanzhuids = localStorage.getItem('guanzhu').split(',')
				// 		}
				// 		let id = (response.data.data.player.sign_id).toString()
				// 		// console.log(this.guanzhuids,player_id,player_id.toString())
				// 		if (this.guanzhuids.includes(id)) {
				// 			this.$set(response.data.data, 'guanzhu', true)
				// 		}
				// 		this.person = response.data.data
				// 		console.log(this.person)
				// 		this.searchshow = false
				// 		this.grenxinxi = true
				// 		// for(let i in response.data.data){
				// 		// 	let id = response.data.data[i].order_id
				// 		// 	if(this.guanzhuids.includes(id.toString())){
				// 		// 		this.$set(response.data.data[i],'guanzhu',true)
				// 		// 	}
				// 		// }
				// 	})

			},
			close: function() {
				this.show = false
				this.show2 = false
				this.liwu_show = false
			},
			close2: function() {
				this.chongzhilog = false
			},
			kai: function() {

				this.liwu_show = true

			},
			guan: function() {
				this.liwu_show = false
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	@font-face {
		font-family: "shuzi";
		/* Project id  */
		src: url('../../static/assets/Black.TTF')
	}
	
	.input::-webkit-input-placeholder {
		color: red;
		font-size: 12px;
	}
	/deep/ .u-toast{ z-index: 99;}
	/deep/ .u-popup__content{ overflow: hidden;}
	.daliwu {
		/deep/ .u-popup__content {
			background: transparent;
		}
	}
	/deep/ .u-icon__icon span{ font-size: 18px !important;}
	// .u-popup__content{ padding: 30rpx;}
	.index {
		width: 100vw;
		height: 100vh;
		
		.youdibu{ position: fixed;bottom: 310rpx;right: 30rpx; z-index: 11;color: #FFFFFF;}

		.top2 {
			position: fixed;
			border-radius: 30rpx;
			z-index: 10;
			top: 100rpx;
			left: 20rpx;
			padding: 10rpx 20rpx;
			background: rgba(255, 255, 255, 1);
			color: #333;
		}
		.top3 {
			position: fixed;
			border-radius: 30rpx;
			z-index: 10;
			top: 170rpx;
			left: 20rpx;
			padding: 10rpx 20rpx;
			background: rgba(255, 255, 255, 1);
			color: #333;
		}

		.top {
			position: fixed;
			z-index: 10;
			top: 0rpx;
			left: 0;
			width: 100%;
			// padding: 18rpx;
			.nav{
				height: 80rpx; background: rgba(255, 255, 255, 0.8); width: 100%;
				.navli{ width: 190rpx; text-align: center;display: flex;align-items: center;justify-content: center; font-size: 29rpx;position: relative;}
				.navliact{ font-weight: bold;}
				.di{ position: absolute;bottom: 0;left: 50%;margin-left: -19rpx;width: 38rpx;background: #FF5811;height: 5rpx;}
			}

			.dashang {
				background: rgba(0, 0, 0, 0.3);
				height: 96rpx;
				padding: 0 20rpx;
				border-radius: 96rpx;
				color: #fff;

				.image {
					position: relative;
					margin-right: 20rpx;

					.maozi {
						position: absolute;
						left: -15rpx;
						top: -25rpx;

						image {
							width: 45rpx;
							height: 45rpx
						}
					}

					.tx {
						image {
							width: 61rpx;
							height: 61rpx;
							border-radius: 61rpx;
							border: 3px #fff solid;
						}
					}

				}
			}

			.sr {
				background: rgba(0, 0, 0, 0.3);
				height: 67rpx;
				padding: 0 20rpx;
				border-radius: 2rpx;
				width: 300rpx;
				border-radius: 67rpx;
			}

			/deep/ .u-input {
				border: 0;
				padding: 0 !important;

			}

			/deep/ .u-input__content__field-wrapper__field {
				color: #FFFFFF !important;
				font-size: 12px !important;
			}
		}
		/deep/ .uni-swiper-dot-active{ background: #FF520C !important;}
		/deep/ .uni-swiper-dot{ background: #898989;}
		.paihang {
			position: fixed;
			z-index: 10;
			top: 180rpx;
			right: 15rpx;
			border-radius: 10rpx;
			.swiper{ height: 600rpx;}
			.phli {
				background: rgba(0, 0, 0, 0.3);
				padding: 10rpx 20rpx;
				color: #fff;

			}

			.phliact {
				background: linear-gradient(328deg, #FF9700 0%, #FFBD1C 100%);
			}

			.phper {
				margin-top: 2rpx;
				// background: rgba(0, 0, 0, 0.1);
				width: 120rpx;
				margin: 0 auto;
				padding: 50rpx 2rpx 50rpx;
				border-radius: 60rpx;

				.bj {
					background: url('../../static/assets/img/p1.png') no-repeat center;
					background-size: 58rpx;
				}

				.phperli {
					position: relative;
					margin-bottom: 2rpx;

					.maozi {
						position: absolute;
						left: 38rpx;
						top: -30rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.tx {
						image {
							width: 69rpx;
							height: 69rpx;
							border-radius: 69rpx;
							border: 3px #fff solid;
						}
					}

					.mingzi {
						background: rgba(0, 0, 0, 0.3);
						text-align: center;
						padding: 5rpx 10rpx;
						position: relative;
						top: -10rpx;
						color: #fff;
						border-radius: 20rpx;
						width: 100rpx;
						margin: 0 auto;
					}
				}
			}
		}

		.dibu {
			position: fixed;
			z-index: 10;
			bottom: 0rpx;
			width: 100%;
			left: 0;
			padding: 0 30rpx;
			padding-bottom: 130rpx;

			.sr {
				background: rgba(0, 0, 0, 0.3);
				height: 72rpx;
				padding: 0 20rpx;
				border-radius: 2rpx;
				width: 100%;
				border-radius: 67rpx;
			}

			/deep/ .u-input {
				border: 0;
				padding: 0 !important;
				width: 340rpx;
			}

			/deep/ .u-input__content__field-wrapper__field {
				color: #FFFFFF !important;
				font-size: 12px !important;
			}
		}

		.liwuc3 {}

		.liwuc2 {
			background: #fff;
			border-radius: 20rpx 20rpx 0 0;
			padding: 30rpx;
			flex-wrap: wrap;

			.czli {
				width: 210rpx;
				height: 120rpx;
				border: 1px #f4f4f4 solid;
				border-radius: 5rpx;
				background: #FFFFFF;
				margin-top: 20rpx;
				background: #f4f4f4;
			}

			.czliact {
				border: 1px #E62B49 solid;
			}
		}

		.liwuc {
			overflow: hidden;

			/deep/ .u-popup__content {
				background: transparent;
			}

			/deep/ .u-input {
				border: 0;
				padding: 0 !important;
				width: 630rpx;

			}

			/deep/ .u-input__content__field-wrapper__field {
				color: #FFFFFF !important;
				font-size: 12px !important;
			}
		}

		.content {
			position: fixed;
			z-index: 10;
			bottom: 220rpx;
			width: 520rpx;
			left: 0;
			padding-left: 30rpx;

			.xc {
				background: rgba(0, 0, 0, 0.3);
				color: #fff;
				line-height: 50rpx;
				border-radius: 50rpx;
				padding: 0rpx 20rpx;
				margin-bottom: 20rpx;
			}

			.lw {
				margin-bottom: 20rpx;

				.lwli {
					margin-bottom: 20rpx;
					background: rgba(0, 0, 0, 0.1);
					padding: 20rpx;
					border-radius: 20rpx;

					.tx {
						image {
							width: 82rpx;
							height: 82rpx;
							border-radius: 82rpx;
						}
					}

					.dx {
						margin: 0 15rpx;
						color: #fff;

						view {
							font-size: 25rpx;
						}
					}

					.wp {
						margin-left: 10rpx;
						color: #fff;

						image {
							width: 96rpx;
							height: 96rpx;
							border-radius: 96rpx;
						}

						.sl {
							font-size: 40rpx;
							font-family: 'shuzi';
							margin-left: 2rpx;
							font-weight: bold;
						}
					}
				}
			}

			.js {
				background: rgba(0, 0, 0, 0.3);
				padding: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				color: #fff;
				font-size: 22rpx;
				line-height: 40rpx;
			}

			.ly {
				max-height: 300rpx;
				overflow: auto;

				.lyli {
					background: rgba(0, 0, 0, 0.3);
					margin-bottom: 15rpx;
					padding: 15rpx 25rpx;
					border-radius: 30rpx;
					color: #fff;

					.name {
						color: #76EBFF;
					}
				}
			}
		}
	}
</style>
